bottom-border-1px($color) {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        z-index: 200;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: $color;
        transform: scaleY(0.5);
    }
}

// 一像素上边框
top-border-1px($color) {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        z-index: 200;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background-color: $color;
    }
}

// 根据像素比缩放1px像素边框
@media only screen and (-webkit-device-pixel-ratio: 2) {
    .border-1px {
        &::before {
            transform: scaleY(0.5);
        }
    }
}

@media only screen and (-webkit-device-pixel-ratio: 3) {
    .border-1px {
        &::before {
            transform: scaleY(0.333333);
        }
    }
}

// 根据像素比来使用 2x图 3x图
bg-image($url) {
    background-image: url($url + '@2x.png');

    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + '@3x.png');
    }
}

// 清除浮动
clearFix() {
    *zoom: 1;

    &::after {
        content: '';
        display: block;
        clear: both;
    }
}
